import { memo, useEffect, useState } from 'react';
import { class_esy, isArray, isEmpty, Tabs } from 'esy-ui';
import { postActivity } from '@/services';
import { Empty, Img } from '@/components';
import { useNavigation } from '@/hooks';
import { useGlobalStore } from '@/mobx';

function RenderTitle(props: any) {
  const { title, isActive } = props;
  return <div className={class_esy(['text-sm font-bold', isActive ? 'text-primary' : 'text-white'])}>{title}</div>;
}

function RenderContent({ data }: any) {
  const navigation = useNavigation();

  console.info(data);

  if (isEmpty(data) || !isArray(data)) return <Empty />;

  const goDetail = (id: number) => {
    navigation(`/activity/detail/${id}`);
  };

  return data.map((it) => (
    <div key={it.Id} className='flex flex-col border border-bdr overflow-hidden rounded-lg mx-3 mb-2 last:mb-4' onClick={() => goDetail(it.Id)}>
      <Img boxClassName='h-32 w-full rounded-t-md' src={it?.DescribeImage} className='object-cover w-full' />
      <div className='bg-head flex items-center justify-between px-3 py-1'>
        <div className='text-xs overflow-hidden'>
          <div className='text-white truncate font-bold'>{it?.Title}</div>
          <div className='text-desc truncate my-1 mr-2'>{it?.Describe}</div>
        </div>
        <div className='bg-primary px-3 py-1 rounded font-bold ml-4'>More</div>
      </div>
    </div>
  ));
}

function List() {
  const [list, setList] = useState();
  const { changeState } = useGlobalStore();

  useEffect(() => {
    changeState('isLoading', true);
    postActivity({})
      .then((res: any) => {
        if (isArray(res?.Data)) {
          setList(res.Data.map((it) => ({ title: it.Title, paneKey: it.Id, contentData: it.ActivityList })));
        }
      })
      .catch(() => {})
      .finally(() => {
        changeState('isLoading', false);
      });
  }, [changeState]);

  return <Tabs tabs={list} isDestroyUnactive renderTitle={<RenderTitle />} renderContent={<RenderContent />} />;
}

export default memo(List);
